<template>
  <div id="login">
    <div class="sea">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    <div class="title">
      <img src="../../assets/image/logo.png" alt="">
      <h1>在线题库</h1>
    </div>
    <div class="content">
      <el-form ref="login" :rules="rules" :model="user">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user" placeholder="请输入手机号或者用户名" v-model="user.username"/>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password v-model="user.pwd"/>
        </el-form-item>
        <el-form-item prop="code">
          <el-input prefix-icon="el-icon-help" placeholder="请输入验证码" v-model="user.code">
            <div @click="makeCode" slot="append">
              <s-identify slot="append" :identifyCode="identifyCode"></s-identify>
            </div>
          </el-input>
        </el-form-item>
        <el-button round :loading="logining" type="primary" @click="verifyUser">登录</el-button>
      </el-form>
    </div>
    <div class="footer" style="text-align: center; font-size:14px; color: #ffffff;">
      <br/>
      <div style="margin-bottom: 5px;">版权所有 2019-2020 宋强·王楠</div>
      <div style="margin-bottom: 5px;"><p style="color: #ffffff; text-decoration: none;">苏ICP备19063886号</p></div>
      <div style="display: flex;align-items: center">
        <img src="../../assets/image/police.png" style="margin-right: 5px;" alt=""><a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32031202000578" style="color: #fff;">苏公网安备
        32031202000578号</a>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from "vuex";
  import SIdentify from "@/components/SIdentify"

  export default {
    name: "login",
    components: {SIdentify},
    data() {
      const verifyLen = {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'};
      const validatePwd = function (rule, value, callback) {
        if (value.toLocaleLowerCase() !== this.identifyCode.toLocaleLowerCase()) {
          callback(new Error('验证码输入错误!'));
        } else
          callback();
      }
      return {
        user: {
          username: '',
          pwd: '',
          code: ''
        },
        identifyCode: '',
        identifyCodes: '1234567890ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
        logining: false,
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            verifyLen
          ],
          pwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            verifyLen
          ],
          code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {validator: validatePwd.bind(this), trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      this.makeCode();
    },
    mounted() {
      window.onkeyup = (e) => {
        this.$route.name === 'login' && e.key === 'Enter' && this.verifyUser();
      }
    },
    methods: {
      makeCode() {
        this.identifyCode = ''
        for (let i = 0; i < 4; i++) {
          this.identifyCode += this.identifyCodes[Math.floor(Math.random() * 62)]
        }
      },
      verifyUser() {
        this.$refs['login'].validate((valid) => {
          if (valid) {
            this.logining = true
            this.login(this.user).then((res) => {
              this.$notify.success({
                title: 'Tip',
                message: '登录成功!'
              })
              this.$router.push({name: 'home'})
            }).catch(err => {
              this.$notify.error({
                title: 'Tip',
                message: '用户名或密码错误!'
              })
            }).finally(() => {
              this.logining = false
            })
          } else return false;
        });
      },
      ...mapActions(['login']),
    },
  }
</script>

<style src="../../assets/css/login.css" scoped/>
